<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 头像区域 -->
      <div class="avator-box"></div>
      <!-- 表单区域 -->
      <div class="inner">
        <el-form
          :model="loginForm"
          :rules="rules"
          ref="loginFormRef"
          class="form"
        >
          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input
              prefix-icon="el-icon-user"
              class="input"
              placeholder="请输入用户名"
              v-model="loginForm.username"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-lock"
              class="input"
              placeholder="请输入密码"
              v-model="loginForm.password"
              show-password
            ></el-input>
          </el-form-item>
          <div class="btns">
            <el-button type="primary" size="small" @click="login">登录</el-button>
            <el-button type="info" size="small" @click="resetForm">重置</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //     表单
      loginForm: {
        username: "admin",
        password: "123456",
      },
      // 表单验证规则
      rules: {
        //表单验证规则
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "用户名长度为3-10", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    resetForm() {
      this.$refs.loginFormRef.resetFields();
    },
    login(){
          this.$refs.loginFormRef.validate(async(valid, obj) => {
                if(valid){
                  const {data: res} = await this.$http.post('/login', this.loginForm);
                  console.log(res)
                  if(res.meta.status !== 200){
                        this.$message({message: res.data.meta.msg, type: 'error'})
                  }else{
                        this.$message({message: '登陆成功', type: 'success'});
                        sessionStorage.setItem('token',res.data.token);
                        this.$router.push('/home');
                  }
                }

                //     if(valid){
            //       this.$http.post('/login', this.loginForm).then((res)=>{
            //             if(res.data.meta.status !== 200){
            //                   this.$message({message: res.data.meta.msg, type: 'error'})
            //             }else{
            //                   this.$message({message: '登陆成功', type: 'success'});
            //             }
            //       },(err)=>{
            //             this.$message({message: '登陆成功', type: 'warning'})
            //       });
                  
            //     }
          })
    }
  },
};
</script>

<style scoped>
.login-container {
  background-color: #2b4b6b;
  height: 100%;
  position: relative;
}
.login-box {
  width: 450px;
  height: 300px;
  background-color: #ffffff;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.avator-box {
  width: 120px;
  height: 120px;
  border-radius: 65px;
  margin: 10px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px #eee;
  background-color: #eee;
  background-image: url("../assets/logo.png");
  background-size: 100px 100px;
  background-repeat: no-repeat;
  background-position: bottom center;
  transform: translate(165px, -60px);
}
.form {
  position: absolute;
  top: 100px;
  left: 50px;
}
.input >>> .el-input__inner {
  width: 350px;
  height: 30px;
  line-height: 20px;
}
.btns {
  display: flex;
  justify-content: center;
}
</style>